<template>
<div v-wechat-title="$route.meta.title"></div>
    <Header />
        <el-row :gutter="20">
            <el-col :span="10" :offset="2">
                <el-card class="box-card" shadow="always">
                    <div class="icon-card"><el-image
                        style="width: 50px; height: 50px"
                        :src="img1"
                        :fit="scale-down"></el-image>
                        <span id="create-title">创建新文章</span>
                        <el-image
                        style="width: 50px; height: 50px"
                        :src="img1"
                        :fit="scale-down"></el-image>
                    </div>
                    <el-form :model="article" :rules="rules" ref="article" label-width="100px">
                        <el-form-item label="文章标题" prop="title">
                            <el-input v-model="article.title" placeholder="请输入文章标题"> </el-input>
                        </el-form-item>

                        <el-form-item label="文章分类" prop="category_id">
                            <a-radio-group v-for="category in categories.data" v-bind:key="category.id">
                                <el-radio v-model="article.category_id" :label= "category.id" class="category">{{category.name}}</el-radio>
                            </a-radio-group>
                        </el-form-item>

                        <el-form-item label="文章标题图" prop="head_img">
                            <el-input v-model="article.head_img"></el-input>
                        </el-form-item>

                        <el-form-item label="正文" prop="content">
                            <Uedit v-model="article.content"></Uedit>
                        </el-form-item>
                    </el-form>
                    <div id="button">
                        <el-button round @click="submitForm('article')"><el-icon style="width: 1em; height: 1em; margin-right: 8px;"><edit /></el-icon>发布文章</el-button>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="10">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span v-html="article.title"></span>
                        </div>
                    </template>
                    <div v-html="article.content" id="content"></div>
                </el-card>
            </el-col>

        </el-row>
    
    <Footer />
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import Uedit from "@/components/Uedit.vue";

import articleService from "@/service/articleService";
import categoryService from "@/service/categoryService";

import { Edit } from '@element-plus/icons';
import { message } from 'ant-design-vue';
import img1 from "/images/3.gif";

export default {
    name: "ArticleCreate",
    components: { 
        Header,
        Footer,
        Edit,
        Uedit,  
        },

    data(){
        return{
            article:{
                title:'',
                category_id:'',
                head_img:'',
                content:'',
            },
            categories:"",
            rules: {
                title: [
                    { required: true, message: '请输入文章标题', max: 10, trigger: 'blur' },
                ],
                category_id:[
                    { required: true},
                ],
                content: [
                    { required: true,  message: '文章正文不可为空', trigger: 'blur' }
                ],
            },
                img1,
            };
    },

    mounted(){
        categoryService.get_category_list().then((response) => (this.categories = response.data.data));
    },

    methods:{
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                articleService.create_article(this.article).then((res) => {
            })
            .then(() => {
                message.success('创建成功',2.5);
                this.$router.push({ name: "MyArticles" });
            })
            .catch((err) => {
                if(err.response.status==400){
                    message.error('创建失败,请检查文章格式',2.5);
                }else{
                    message.error('系统异常，请稍后再试',2.5);
                }      
            });
            } else {
                message.error('创建失败',2.5);
                return false;
            }
        });
        },
    }
};

</script>

<style scoped>
.box-card {
    width: 95%;
    height: 800px;
    overflow-y: auto;
}

.card-header {
    text-align: center;
}


#button{
    display:flex;
    justify-content: center;
    align-items: center;
    position:relative;
    padding-top:10px;
}


#login {
    text-align: center;
}
.icon-card{
    display:flex;
    justify-content: center;
    align-items: center;
    position:relative;
}
#create-title{
    font-size: large;
    font-weight: 800;
    align-self:center;
}
.category{
    padding: 10px;
    display: flex;
}
</style>
